<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/css/common.css}">
</head>
<body>
    <div th:insert="~{common/header::header1}"></div>
    <div class="container">
        <div class="row">
            <div class="col-md-12" style="background-color:#fff;margin-bottom: 5px;">
                <a class="btn-primary btn-sm" th:href="@{/testGlobal}" style="position: fixed;right: 10px">全球数据</a>
                <div id="myMap" style="height: 600px;"></div>

            </div>
        </div>
        <div class="row" style="height: 400px;overflow: auto">
            <div class="col-md-12" style="background-color: #fff">
                <table class="table table-hover table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>省份</th>
                            <th>确诊人数</th>
                            <th>治愈人数</th>
                            <th>死亡人数</th>
                            <th>无症状人数</th>
                            <th>境外输入人数</th>
                        </tr>
                    </thead>
                    <tbody id="tbody1"></tbody>
                </table>
            </div>
        </div>
        <div class="row" style="margin-top: 5px">
            <div class="col-md-12">
                <div id="mycharts" style="height: 500px;border: 1px solid gray;background-color:#fff;"></div>
            </div>
        </div>
        <div class="row" style="margin-top: 5px">
            <div class="col-md-12">
                <div id="mycharts2" style="height: 500px;border: 1px solid gray;background-color:#fff;"></div>
            </div>
        </div>
    </div>
</body>
<script th:src="@{/jquery/jquery-3.5.1.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.js}"></script>
<script th:src="@{/echarts/echarts.js}"></script>
<script th:inline="javascript">
    $(function () {
        var date = new Date();
        console.log(date);
        var y = date.getFullYear();
        var m = date.getMonth()+1;
        var d = date.getDate();
        var nowDate = y + "-" + m + "-" + d;
        console.log(nowDate);
        //定义（声明）个用来给表格中装载数据的函数
        var fillToTable = function (epidemics) {
            var tbody1 = $("#tbody1");
            tbody1.empty();
            $.each(epidemics, function (index, epidemic) {
                var tr = $("<tr>");
                var td = $("<td>");
                td.text(epidemic.cityName);
                tr.append(td);
                td = $("<td>");
                td.html("" + epidemic.affirmedTotal);
                tr.append(td);

                td = $("<td>");
                td.html("" + epidemic.curedTotal);
                tr.append(td);

                td = $("<td>");
                td.html("" + epidemic.deadTotal);
                tr.append(td);

                td = $("<td>");
                td.html("" + epidemic.symptomlessTotal);
                tr.append(td);

                td = $("<td>");
                td.html("" + epidemic.overseasInputTotal);
                tr.append(td);

                tbody1.append(tr);
            });
        };
        // 初始化图表
        var myCharts = echarts.init($("#mycharts").get(0));
        var myCharts2 = echarts.init($("#mycharts2").get(0));
        // 定义数据格式
        var option = {
            title: {
                text: '全国疫情累计趋势图',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['累计确诊', '累计死亡', '累计治愈'],
                right: 'right'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis: {
                type: 'value',
                name: '人数',
            },
            series: [
                {
                    name: '累计确诊',
                    type: 'line',
                    stack: '总量1',
                    data: []
                },{
                    name: '累计死亡',
                    type: 'line',
                    stack: '总量2',
                    data: []
                },{
                    name: '累计治愈',
                    type: 'line',
                    stack: '总量3',
                    data: []
                }
            ]
        };
        // 定义数据格式
        var option2 = {
            tooltip: {
                trigger: 'axis',
                position: function (pt) {
                    return [pt[0], '10%'];
                }
            },
            title: {
                left: 'center',
                text: '全国累计确诊人数趋势图',
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis: {
                type: 'value',
                name: '人数',
                boundaryGap: [0, '100%']
            },
            dataZoom: [{
                type: 'inside',
                start: 0,
                end: 10
            }, {
                start: 0,
                end: 10
            }],
            series: [
                {
                    name: '累计确诊人数',
                    type: 'line',
                    symbol: 'none',
                    sampling: 'lttb',
                    itemStyle: {
                        color: 'rgb(255, 70, 131)'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgb(255, 158, 68)'
                        }, {
                            offset: 1,
                            color: 'rgb(255, 70, 131)'
                        }])
                    },
                    data: []
                }
            ]
        };
        myCharts.setOption(option);
        myCharts2.setOption(option2);
        function stringToDate (dateStr,separator){
            if (!separator){
                separator= "-" ;
            }
            var  dateArr = dateStr.split(separator);
            var  year = parseInt(dateArr[0]);
            var  month;
            if (dateArr[1].indexOf( "0" ) == 0){
                month = parseInt(dateArr[1].substring(1));
            } else {
                month = parseInt(dateArr[1]);
            }
            var  day = parseInt(dateArr[2]);
            var date = year + "/" + month + "/" + day;
            return  date;
        };
        //将服务器端返回的数据设置到图表上
        var fillToChart2 = function (epidemics) {
            var date = [];
            var affirmed = [];
            var temp = null;
            $.each(epidemics, function (index, epidemic) {
                temp=stringToDate(epidemic.date);
                date.push(temp);
                affirmed.push(epidemic.affirmed);
            });
            myCharts2.setOption({
                xAxis: {
                    data: date
                },
                series: [{
                    data: affirmed
                }]
            });
        };
        var fillToChart3 = function (epidemics) {
            var date = [];
            var data = [];
            var data1= [];
            var data2= [];
            var data3= [];
            var temp = null;
            $.each(epidemics, function (index, epidemic) {
                temp=stringToDate(epidemic.date);
                date.push(temp);
                data1.push(epidemic.affirmed);
                data2.push(epidemic.dead);
                data3.push(epidemic.cured);
            });
            data.push(data1);
            data.push(data2);
            data.push(data3);
            myCharts.setOption({
                xAxis: {
                    data: date
                },
                series: [{
                    data: data[0]
                },{
                    data: data[1]
                },{
                    data: data[2]
                }
                ]
            });
        };
        var myMap = echarts.init($("#myMap").get(0));
        //获取地图json数据，显示中国地图
        $.get([[${#request.getContextPath()}]] + "/echarts/china.json", {}, function (chinaJson) {
            echarts.registerMap("china", chinaJson);
            var option = {
                title:{
                    text: nowDate + "全国疫情分布图"
                },
                tooltip: {},
                visualMap:{
                    type: "piecewise",
                    pieces: [
                        {gt: 10000},  // (900, 1500]
                        {gt: 1000, lte: 9999},  // (310, 1000]
                        {gt: 100, lte: 999},   // (200, 300]
                        {gt: 10, lte: 99},   // (200, 300]
                        {gt: 0, lte: 9},       // (10, 200]
                        {value:0}
                    ],
                    inRange:{
                        color:['#e2ebf4','#faebd2','#e9a188','#d56355','#bb3937','#772526']
                    }
                },
                series: [
                    {
                        name: '累计确诊人数',
                        type: 'map',
                        map: 'china',
                        data: []
                    }
                ]
            };
            myMap.setOption(option);
        },"json");
        //将数据填充到地图中
        var fillToMap = function (epidemics) {
            var data = [];
            $.each(epidemics, function (index, epidemic) {
                var obj = {};
                obj.name = epidemic.cityName;
                obj.value = epidemic.affirmedTotal;
                data.push(obj);
            });
            myMap.setOption({
                series: [
                    {
                        /*name: '累计确诊人数',
                        type: 'map',
                        mapType: 'china',*/
                        data: data
                    }
                ]
            });
        };
        //发送请求获取最新疫情数据
        $.get([[${#request.getContextPath()}]]+"/epidemic-info/ajax/latestData", {}, function (resp) {
            if (resp.code < 0) {
                alert(resp.msg);
            } else {
                fillToMap(resp.data);
                fillToTable(resp.data);
            }
        }, "json");
        //发送请求获取最新疫情数据
        $.get([[${#request.getContextPath()}]]+"/epidemic-info/ajax/dataForChart", {}, function (resp) {
            if (resp.code < 0) {
                alert(resp.msg);
            } else {
                fillToChart2(resp.data);
                fillToChart3(resp.data);
            }
        }, "json");
    });
</script>
</html>